<template>
	<view class="feedback-record">
		<feedback-record-card v-for="item in dataList" :key="item.id" :detail="item"></feedback-record-card>
		<empty v-if="isEmpty"></empty>
		<up-loadmore v-else marginTop="24" :status="loadMoreStatus" :nomore-text="$t('network.noDataOfMore')"
			:loading-text="$t('common.loadingText')" color="#9e9e9e" lineColor="#9e9e9e" dashed
			:line="loadMoreStatus == 'nomore'" />
	</view>
</template>

<script setup>
	import {
		getFeedbackRecords
	} from "../../apis/components/system";
	import useRefreshablePagination from "@/composable/hooks/useRefreshablePagination.js";

	const fetchData = async (page, pageSize) => {
		const data = await getFeedbackRecords(page, pageSize).then(res => res?.data.records || []);
		return {
			data
		};
	};
	const {
		dataList,
		loadMoreStatus,
		isEmpty
	} = useRefreshablePagination(fetchData);
</script>

<style lang="scss" scoped>
	.feedback-record {
		padding: 24rpx 32rpx;
	}
</style>